.mine-wrap {
  min-height: calc(100vh - 100px);

  .mine-wrap-header {
    position: relative;
    background: url('~@/assets/imgs/mine/top_bg.png');
    background-size: 100% 100%;
    padding: 116px 40px 8px;
    .logout {
      position: absolute;
      top: 58px;
      right: 40px;
      width: 52px;
      height: 52px;
      background: url('~@/assets/imgs/mine/logout.png') no-repeat center;
      background-size: 100% 100%;
    }
    .user-info-box {
      display: flex;
      align-items: center;
      .user-img {
        width: 132px;
        height: 132px;
      }

      .user-phone {
        margin-left: 24px;
        color: #111;
        font-size: 32px;
        font-weight: bold;
      }
    }
    .personal-info {
      height: 148px;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: url('~@/assets/imgs/mine/banner-bg.png') no-repeat center;
      background-size: 100% 100%;
      padding: 0 26px 0 108px;
      margin-top: 42px;
      color: #FFF6D0;
      font-weight: bold;
      font-size: 32px;
      &::before {
        content: '';
        position: absolute;
        left:26px;
        top: 50%;
        transform: translateY(-50%);
        width: 68px;
        height: 68px;
        background: url('~@/assets/imgs/mine/banner-left.png') no-repeat center;
        background-size: 100% 100%;
      }
      & > .check {
        position: relative;
        width: 164px;
        height: 58px;
        background: #FAD84E;
        border-radius: 28px;
        box-sizing: border-box;
        line-height: 58px;
        color: #EC5958;
        font-size: 28px;
        padding-left: 20px;
        &::after {
          content: '';
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 18px;
          width: 16px;
          height: 16px;
          background: url('~@/assets/imgs/mine/icon_right.png') no-repeat;
          background-size: contain;
        }
      }
      & > .completed {
        color: #FAD84E;
      }
    }
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      transform: translateY(65%);
      height: 60px;
      background: url('~@/assets/imgs/mine/top_bottom.png');
      background-size: 100% 100%;
    }
  }
  .wrap-list {
    padding: 48px 40px 0;
    .list-item {
      position: relative;
      display: flex;
      align-items: center;
      height: 96px;
      text-align: center;
      margin-bottom: 24px;
      padding: 0 16px;
      background-color: #fff;
      border-radius: 16px;
      div {
        font-size: 32px;
        color: #333333;
        display: flex;
        align-items: center;
        img {
          width: 48px;
          height: 48px;
          margin-right: 32px;
        }
      }
      img {
        width: 44px;
        height: 44px;
      }
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 16px;
        width: 44px;
        height: 44px;
        background: url('~@/assets/imgs/icon/icon_right_8.png');
        background-size: 100% 100%;
      }
    }
  }
}
